<template>
  <div id="allmap" style="width: 100%; height: 480px;"></div>
</template>

<script>
import resize from "./mixins/resize";
import { mapSeries } from "@/api/map_data";
import { coordinateToPoints, parseGeo } from "@/utils/equipmentMapUtil";
const animationDuration = 6000;
export default {
  mixins: [resize],
  data() {
    return {
      AK: "Ft3kajdVBAny8P0NdfGzkD1zvFTfmycB",
      map: null,
      city: "鹤壁市",
      area: "",
      ply: null,
      marker: null
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      var _this = this;
      this.map = new BMap.Map("allmap"); // 创建Map实例
      this.map.centerAndZoom("鹤壁市山城区", 15);

      var options = {
        renderOptions: {
          map: this.map,
          selectFirstResult: true
        },
        onSearchComplete: function(results) {
          //这个函数会被调用两次
        }
      };

      this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

      // 绘制点
      for (let i = 0; i < mapSeries.length; i++) {
        var opts = {
          position: new BMap.Point(mapSeries[i].lng, mapSeries[i].lat), // 指定文本标注所在的地理位置
          offset: new BMap.Size(-50, -30) // 设置文本偏移量
        };

        // 创建文本标注对象
        var html = mapSeries[i].name;

        var label = new BMap.Label(html, opts);
        // 自定义文本标注样式
        label.setStyle({
          borderRadius: "50%",
          overflow: "hidden",
          width: "82px",
          height: "82px",
          lineHeight: "82px",
          border: "0",
          color: "#fff",
          textAlign: "center",
          backgroundColor: "rgba(48,114,246,0.7)"
        });
        label.extData = {
          data: mapSeries[i].name,
          index: i,
          lng: mapSeries[i].lng,
          lat: mapSeries[i].lat,
          name: mapSeries[i].name,
          leader: mapSeries[i].leader,
          committee: mapSeries[i].committee,
          resident: mapSeries[i].resident,
          distribution: mapSeries[i].distribution,
        };
        this.map.addOverlay(label);

        label.addEventListener("click", function(e) {

          var data =  e.target.extData;
          var opts = {
            width: 230, // 信息窗口宽度
            height: 280, // 信息窗口高度
            title: data.name, // 信息窗口标题
          };

         
          var title = '<div class="popTitle" style="background:transparent !important;">' + data.name + '</div>';
          var html = [];
          html.push('<div>');
          html.push('<div class="infoItems" style="background:transparent !important;"><span>社区：</span><span>' + data.name + '</span></div>')
          html.push('<div class="infoItems" style="background:transparent !important;"><span>党委书记：</span><span>' + data.leader + '</span></div>')
          // html.push('<div class="infoItems" style="background:transparent !important;"><span>副 书 记：</span><span>' + pos.poi_lat + '</span></div>')
          html.push('<div class="infoItems" style="background:transparent !important;"><span>委员：</span><span>' + data.committee + '</span></div>')
          html.push('<div class="infoItems" style="background:transparent !important;"><span>居民：</span><span>' + data.resident + '</span></div>')
          html.push('<div class="infoItems" style="background:transparent !important;"><span>年龄比例：</span></div>')
          html.push('<div class="infoItems" style="background:transparent !important;"><span>35岁以下：</span><span>' + data.distribution[0] + '人</span></div>')
          html.push('<div class="infoItems" style="background:transparent !important;"><span>36~45岁以下：</span><span>' + data.distribution[1] + '人</span></div>')
          html.push('<div class="infoItems" style="background:transparent !important;"><span>46~55岁以下：</span><span>' + data.distribution[2] + '人</span></div>')
          html.push('<div class="infoItems" style="background:transparent !important;"><span>56~65岁以下：</span><span>' + data.distribution[3] + '人</span></div>')
          html.push('<div class="infoItems" style="background:transparent !important;"><span>66岁以上：</span><span>' + data.distribution[4] + '人</span></div>')
          html.push('</div>');
    
          var infoWindow = new BMap.InfoWindow(
           html.join(""),
            opts
          ); // 创建信息窗口对象
          var point = new BMap.Point(
            e.target.extData.lng,
            e.target.extData.lat
          );

          _this.map.openInfoWindow(infoWindow, point); //开启信息窗口
        });
      }
    },
    // showArea(area, map) {
    //   let _this = this;

    //   this.$jsonp(
    //     "http://api.map.baidu.com/place/v2/search?output=json&scope=2",
    //     {
    //       q: area,
    //       region: this.city,
    //       ak: this.AK
    //     }
    //   ).then(data => {
    //     if (data.message == "ok") {
    //       var houses = data.results;
    //       if (houses && houses.length > 0) {
    //         var house = houses[0];
    //         this.$jsonp(
    //           "http://map.baidu.com/?reqflag=pcmap&coord_type=3&from=webmap&qt=ext&ext_ver=new&l=18",
    //           {
    //             uid: house.uid
    //           }
    //         ).then(houseOutline => {
    //           var geo = houseOutline.content.geo;
    //           if (!geo) {
    //             var location = house.location;
    //             var point = new BMap.Point(location.lng, location.lat);
    //             map.centerAndZoom(point, 19);
    //             _this.marker = new BMap.Marker(point);
    //             _this.marker.setAnimation(BMAP_ANIMATION_BOUNCE);
    //             map.addOverlay(_this.marker);
    //           } else {
    //             var geoObj = parseGeo(geo);
    //             //边界点
    //             var points = coordinateToPoints(map, geoObj.points);
    //             _this.ply = new BMap.Polygon(points, {
    //               strokeWeight: 2,
    //               strokeColor: "#F01B2D",
    //               strokeOpacity: 0.9,
    //               fillColor: "#FFEBCC"
    //             }); //建立多边形覆盖物
    //             map.addOverlay(_this.ply); //添加覆盖物
    //             map.setViewport(_this.ply.getPath()); //调整视野
    //           }
    //         });
    //       }
    //     }
    //   });
    // }
  }
};
</script>
<style scope>
.map {
  width: 100%;
  height: 100%;
}
</style>
